<template>
  <div class="tpl38-img">
    <section
      class="modulePadding mob48"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
      <section class="goods_img_left">
        <a
          v-for="(goods, index) in tplItemData.dataset" :key="index"
          @click="openLink(goods.link)"
          :class="`goods-img goodsimg-${index+1}`"
          :style="`background-image:url(${goods.pic}${goods.is_compress ? '480x480': ''})`">
        </a>
      </section>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.tpl38-img{
  //47模板服务承诺
  .goods_img_left{
    position: relative;
    padding-top: 54%;
    .goods-img{
      display: block;
      position: absolute;
      height: 48.5%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-color: #eee;
      border-radius:4px;
      &.goodsimg-1 {
        top: 0;
        left: 0;
        width: 49.33333%;
      }
      &.goodsimg-2 {
        top: 0;
        right: 0;
        width: 49.33333%;
      }
      &.goodsimg-3 {
        right: 0;
        bottom: 0;
        width:100%;
      }
      
    }
  }
}
</style>
